<template>
	<view>
		<!-- 练习记录 -->
		<u-navbar title="练习记录" title-color="#fff" :background="background" back-icon-color="#ffffff"
			:back-text-style="{color: '#fff'}">
			<view class="slot-wrap">
				<u-icon name="list-dot" color="#ffffff" size="36" @click="changeModel"></u-icon>
			</view>
		</u-navbar>
		<!-- 		<u-search class="searchBar"  placeholder="搜索题库" :clearabled="true"
		v-model="keyword"></u-search> -->
		<!-- 以下为筛选框 -->
		<u-dropdown :close-on-click-mask="mask" ref="uDropdown" :activeColor="activeColor">
			<u-dropdown-item @change="change" v-model="orderValue" title="排序" :options="sortList"></u-dropdown-item>
			<u-dropdown-item title="筛选">
				<view class="slot-content">
					<view>类型</view>
					<view class="item-box">
						<view class="item" :class="[item.active ? 'active' : '']" @tap="queTagClick(index)"
							v-for="(item, index) in exeTypelist" :key="index">
							{{item.label}}
						</view>
					</view>
				</view>
				<!-- <view class="slot-content">
					<view>难度</view>
					<view class="item-box">
						<view class="item" :class="[item.active ? 'active' : '']" @tap="diffTagClick(index)"
							v-for="(item, index) in diffList" :key="index">
							{{item.label}}
						</view>
					</view>
				</view> -->
				<u-button type="primary" @click="closeDropdown">确定</u-button>
			</u-dropdown-item>
		</u-dropdown>

		<view class="recordArea" v-for="(item, index) in pracRecordList" :key="index">
			<view class="recordItem" @click="selectClick(item, index)">
				<u-icon class="iconStyle" name="checkmark-circle" color="#666666" size="35"
					v-show="editModel && !item.select"></u-icon>
				<u-icon class="iconStyle" name="checkmark-circle-fill" color="#2979ff" size="35"
					v-show="editModel && item.select"></u-icon>
				<prac-record :pracRecordItem="item" @recordClick="recordReview"></prac-record>
			</view>
		</view>
		<view class="buttonArea" v-show="editModel">
			<u-button type="warning" shape="circle" @click="selectAll">全选</u-button>
			<u-button type="error" shape="circle" @click="selectDelete">删除
				<text v-show="selectAmount>0">({{selectAmount}})</text>
			</u-button>
		</view>
		<u-modal v-model="ModalShow" content="是否确认删除选中项目？" :show-cancel-button="true" :mask-close-able="true"
			@confirm="confirmDelete"></u-modal>
		<u-loadmore :status="status" />
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				pracRecordList: [],
				status: 'loadmore',
				page: 1,
				background: {
					// 'background-image': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
					'background-image': 'linear-gradient(45deg, #007fd1, #013cd2)'
				},
				mask: true,
				activeColor: '#2979ff',
				orderValue: '', // 记录下拉栏中的排序
				exeTypeSelected: '',
				sortList: [{
						label: '时间从近及远（默认）',
						value: 1,
					},
					{
						label: '时间从远及近',
						value: 2,
					},
					{
						label: '得分从高到低',
						value: 3,
					},
					{
						label: '得分从低到高',
						value: 4,
					}
				],

				exeTypelist: [{
						label: '全部',
						value: '',
						active: true,
					},
					{
						label: '模拟考试',
						value: 1,
						active: false,
					},
					{
						label: '知识点练习',
						value: 2,
						active: false,
					}
				],

				iconSrc: "../../static/dualSel.png",
				editModel: false,
				selectAmount: 0, //记录被选中的项目的数量
				selectArr: [], //记录被选中的项目的id
				ModalShow: false,
			}
		},
		methods: {
			recordReview(id) {
				this.$u.route('/pages/exam/pracRecordDetail', {
					recordId: id,
				})
			},
			// searchFunc(keyword) {
			// 	console.log(keyword);
			// 	var that = this
			// 	this.$api.pracRecord(1, keyword)
			// 		.then(res => {
			// 			uni.showToast({
			// 				title: '搜索成功'
			// 			})
			// 			console.log(res);
			// 			// console.log('考试列表:',res.values.records);
			// 			that.examList = res.values.records
			// 		})
			// },
			change(index) {
				// this.$u.toast(`点击了第${index}项`);
				this.$u.toast(`筛选成功`);
				var that = this
				// console.log('orderValue',this.orderValue);
				switch (index) {
					case 1:
						// 按照时间降序排列
						that.pracRecordList.sort(function(a, b) {
							return b.createTime < a.createTime ? -1 : 1
						})
						break
					case 2:
						// 按照时间升序排列
						that.pracRecordList.sort(function(a, b) {
							return b.createTime < a.createTime ? 1 : -1
						})
						break
					case 3:
						// 按照得分从高到低
						that.pracRecordList.sort(function(a, b) {
							return b.score < a.score ? -1 : 1
						})
						break
					case 4:
						// 按照得分从低到高
						that.pracRecordList.sort(function(a, b) {
							return b.score < a.score ? 1 : -1
						})
						break
				}

			},
			queTagClick(index) {
				// this.list[index].active = !this.list[index].active;
				// 单选，首先清除所有的激活状态
				for (let item of this.exeTypelist) {
					item.active = false
				}
				this.exeTypelist[index].active = true;
				this.keyword = this.exeTypelist[index].value
			},

			//---- 多选相关的函数----//
			changeModel() {
				// this.$refs.dualSelect.changeModel()
				this.editModel = !this.editModel
			},
			closeDropdown() {
				var that = this
				this.$refs.uDropdown.close();
				// for(let item of this.queTypelist){
				// 	item.active = false
				// }
				this.$api.pracRecord(1, this.keyword)
					.then(res => {
						uni.showToast({
							title: '筛选成功'
						})
						console.log(res);
						that.pracRecordList = res.values.records
					})
			},
			selectClick(item, index) {
				// if (this.options.itemCanSelect && this.editModel) {
				if (this.editModel) {
					// select 变量用于保存是否被选中
					this.pracRecordList[index].select = !this.pracRecordList[index].select
				}
				if (item.select) {
					this.selectAmount++
					this.selectArr.push(item.id)
				} else {
					this.selectAmount--
					this.selectArr.pop(item.id)
				}
			},
			selectDelete() {
				this.ModalShow = true;
			},
			confirmDelete() {
				let selectStr = this.selectArr.join(',')
				console.log(selectStr);
				this.$api.delRecord(selectStr)
					.then(res => {
						console.log('delBatch:', res)
						// 强制刷新
						uni.navigateBack({
							delta: 0,
						});
					})
			},

			selectAll() {
				// 全选与取消功能
				var that = this
				if (that.isSelectAll) {
					// 取消选择
					for (let item of this.pracRecordList) {
						item.select = false
						that.selectArr.pop(item.id)
					}
					that.isSelectAll = false
				} else {
					// 进行全选
					for (let item of this.pracRecordList) {
						item.select = true
						that.selectArr.push(item.id)
					}
					that.isSelectAll = true
				}
			},
			//----<<<多选相关的函数----//
		},
		onLoad() {
			this.$api.pracRecord(1, '')
				.then(res => {
					console.log(res);
					this.pracRecordList = res.values.records
				})
		},
		onReachBottom() {
			if (this.keyword == undefined) {
				this.keyword = ''
			}
			if (this.status === 'loadmore') {
				this.page += 1
				this.status = 'loading'
				this.$api.pracRecord(this.page, this.keyword)
					.then(res => {
						if (res.values.records.length === 0) {
							this.status = 'nomore'
						} else {
							this.pracRecordList = this.pracRecordList.concat(res.values.records)
							this.status = 'loadmore'
						}
					})
			}
		}
	}
</script>
</script>

<style scoped lang="scss">
	.searchBar {
		padding: 20upx;
	}

	.slot-wrap {
		flex: 1; // 让slot内容占满整个导航栏的宽度
		display: flex;
		justify-content: flex-end;
		/* align-items: center; */
		margin-right: 40rpx;
	}

	.recordItem {
		display: flex;
		justify-content: center;
		align-items: center;
		// flex-wrap: wrap;
	}

	.iconStyle {
		padding: 0 0 0 15rpx;
		// transition: 0.5s;
	}

	.buttonArea {
		position: fixed;
		// background-color: #FFFFFF;
		background-color: #F1F1F1;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100upx;
		z-index: 99;
		box-shadow: 0 0 5px 1px rgba($color: #000000, $alpha: 0.1);
		display: flex;
		// justify-content: ;
		align-items: center;
	}

	.slot-content {
		background-color: #FFFFFF;
		padding: 24rpx;

		.item-box {
			margin-bottom: 50rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.item {
				border: 1px solid $u-type-primary;
				color: $u-type-primary;
				padding: 8rpx 40rpx;
				border-radius: 100rpx;
				margin-top: 30rpx;
			}

			.active {
				color: #FFFFFF;
				background-color: #2979ff;
			}
		}
	}
</style>
